<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 选择ul里面的第一个孩子li */
			ul li:first-child {
				background-color: red;
			}

			/* 选择ul里面的最后一个孩子li */
			ul li:last-child {
				background-color: green;
			}
			
			/* nth-child(n) 可以选择父元素里面一个或多个特定的子元素 */
			
			ul li:nth-child(2) {
				background-color: skyblue;
			}
			ul li:nth-child(4) {
				background-color: skyblue;
			}
			
		</style>
	</head>
	<body>
		<h2>结构伪类选择器主要根据文档结构来选择元素</h2>

		<ul>
			<li>我是第1个孩子</li>
			<li>我是第2个孩子</li>
			<li>我是第3个孩子</li>
			<li>我是第4个孩子</li>
			<li>我是第5个孩子</li>
			<li>我是第6个孩子</li>
			<li>我是第7个孩子</li>
			<li>我是第8个孩子</li>
		</ul>
	</body>
</html>
